<template>
    <div class="box">
        <div class="title"><div v-for="value in titles" >{{ value }}</div></div>
        <div v-for="val1 in props.list" class="row">
            {{isRed(val1) }}
            <div v-for="(value, keys, index) in val1" class="column" v-bind:class="color">
                {{ value }}
            </div>
        </div> 
    </div>
</template>
<script setup>
import { defineProps,ref } from 'vue';
const titles = ["ID", "名称", "价格"]
let props=defineProps({list:{type:Array}})
let color="color:red"
function isRed(val1){
   if(val1.price>100){
    color="color-red";
   } else{
   color= "color-black"
   }
}
</script>
<style scoped>
.box {
    color: black;
    width: 50vw;
    border: 2px solid black;
}
.title{
    display: flex;  
}
.row{
    display: flex;
}
.title>div,.column{
width: 30vw;
padding-left: 5vw;
}
.color-red{
    color: red;
}
.color-black{
    color: black;
}
</style>
练习题 1：商品列表与详情（父传子基础）
需求：
- 父组件 ProductList 中维护一个商品列表数组（包含 id、name、price、image 字段）。
- 子组件 ProductItem 负责渲染单个商品的卡片（显示图片、名称、价格）。
- 父组件通过循环将每个商品的数据传递给子组件，实现商品列表展示。
要求：
1.父组件使用 v-for 循环渲染 ProductItem，并通过 props 传递商品数据。
2.子组件需定义 props 类型（使用 defineProps），并指定必填项和数据类型。
3.当商品价格大于 100 元时，子组件中价格文字显示为红色；否则为黑色。
提示：
- 子组件 props 可定义为：{ id: Number, name: String, price: Number, image: String }
- 价格样式可通过动态 :class 控制。